<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .has-border {
            border: 1px solid black;
        }

        .page {

        }

        .page:after {
            content: "";
            clear: both;
            display: block;
        }

    </style>
</head>
<body>
<div class="has-border" style="width: 500px; height: 500px;">
    <div class="has-border">1</div>
    <div class="has-border page">
        <div style="float: left;">s1</div>
        <div style="float: right;">s2</div>
    </div>
    <div class="has-border">3</div>
</div>

<div class="has-border" style="width: 500px; height: 500px;">
    <div class="has-border">1</div>
    <div class="has-border">
        <div style="float: left;">s1</div>
        <div style="float: right;">s2</div>
        <span style="display: block; clear: both;"></span>
    </div>
    <div class="has-border">3</div>
</div>
</body>
</html>